<template>
  <div class="homepage">
    <!-- 酒店标题 -->
    <header class="hotel-header">
      <h1 class="hotel-title">欢迎来到巴普特酒店</h1>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 酒店图片轮播 -->
      <HotelCarousel />
      
      <!-- 登录选项 -->
      <LoginOptions :on-login="onLogin" />
    </main>

    <!-- 系统概览 -->
    <SystemStats 
      :total-rooms="totalRooms"
      :max-service-objects="maxServiceObjects"
      :serving-count="servingCount"
      :waiting-count="waitingCount"
    />

    <!-- 功能展示 -->
    <FeatureShowcase />

    <!-- 页脚 -->
    <HotelFooter />
  </div>
</template>

<script setup lang="ts">
// 导入子组件
import HotelCarousel from './homepage/HotelCarousel.vue';
import LoginOptions from './homepage/LoginOptions.vue';
import SystemStats from './homepage/SystemStats.vue';
import FeatureShowcase from './homepage/FeatureShowcase.vue';
import HotelFooter from './homepage/HotelFooter.vue';

// 用户角色类型
export type UserRole = 'guest' | 'admin' | 'frontdesk' | 'manager' | 'superadmin';

// Props
interface Props {
  onLogin: (role: UserRole) => void;
  totalRooms?: number;
  maxServiceObjects?: number;
  servingCount?: number;
  waitingCount?: number;
}

defineProps<Props>();
</script>

<style scoped>
.homepage {
  width: 100%;
  min-height: 100vh;
  background: #f8fafc;
}

/* 酒店标题 */
.hotel-header {
  background: #ffffff;
  padding: 32px 20px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hotel-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: 1px;
}

/* 主内容区域 */
.main-content {
  max-width: 1700px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hotel-title {
    font-size: 2rem;
  }

  .main-content {
    padding: 20px 16px;
  }
}

@media (max-width: 480px) {
  .hotel-header {
    padding: 24px 16px;
  }

  .hotel-title {
    font-size: 1.75rem;
  }

  .main-content {
    padding: 16px 12px;
  }
}
</style>
